<template>
    <div class="item2"></div>
    <div class="content">
        <h1>夜晚也很美</h1>
        <p>屋内明黄色的灯光让气氛变得温和，每个人都在为下一年二努力，期待着亮丽的明天</p>
        <div class="photos" v-for="(item,index) in photo" :key="index">
            <img :src="item">
        </div>
        <va-button color="black">下载</va-button>
    </div>
</template>

<script>
import {reactive,toRefs} from 'vue'
        
export default {
    setup(){
        const other2=require('../../assets/other2.png')
        const other3=require('../../assets/other3.png')
        const other4=require('../../assets/other4.png')
        const other5=require('../../assets/other5.png')
        const state=reactive({   
            photo:[other2,other3,other4,other5]
        })
        return{
            ...toRefs(state),
            other2,other3,other4,other5
        }
    }       
};
</script>

<style scoped>
.item2{
    width: 375px;
    height: 550px;
    background-image: url(../../assets/page2Img.PNG);
    background-size: cover;
}
.content{
    width: 330px;
    height: 280px;
    position: absolute;
    top: 330px;
    background: white;
    left: 45px;
    border-top-left-radius: 30px;
    animation:rotateInUpLeft;
    animation-duration: 1s;
}
.content h1{
    margin-top: 30px;
    margin-left: 30px;
}
.content p{
    font-size: 13px;
    color: rgba(128,128,128,0.6);
    margin-left: 30px;
    margin-top: 15px;
    line-height: 28px;
    width: 250px;
    font-weight: 600;
}
.photos{
    margin-left: 25px;
    margin-top: 20px;
}
.photos img{
   float: left;
   margin-right: 10px;
   border-radius: 5px;
   width: 65px;
   height:65px;
   object-fit: cover;
}
.va-button{
    width: 150px;
    margin-left: 90px;
    margin-top: 20px;
}
</style>